<!--
 * @Author: 关棺 3156298705@qq.com
 * @Date: 2024-12-17 16:22:55
 * @LastEditors: 关棺 3156298705@qq.com
 * @LastEditTime: 2024-12-17 16:36:54
 * @FilePath: \supervision-ui\src\views\file\fileVersion\components\leaveMessage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
     <el-dialog title="留言" :visible.sync="dialogVisible" width="400px">
        <el-form :model="messageForm" ref="messageForm" label-width="80px">
            <el-form-item label="留言时间" prop="commentTime">
          <el-date-picker
            clearable
            v-model="messageForm.commentTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择留言时间"
          >
          </el-date-picker>
        </el-form-item>
          <el-form-item label="留言内容" prop="content">
            <el-input
              type="textarea"
              :rows="4"
              v-model="messageForm.content"
              placeholder="请输入留言内容"
            ></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitMessage">确 定</el-button>
        </span>
      </el-dialog>
  </template>
  
  <script>
import {addComment } from "@/api/file/comment";
  export default {
    data() {
      return {
        dialogVisible: false, // 控制弹出框显示/隐藏
        messageForm: {
          content: '', // 留言内容
          commentTime:''
        },
        id:''
      };
    },
    methods: {
      // 显示留言弹出框
      showLeaveMessageDialog(id) {
        // console.log(id);
        this.id = id
        this.messageForm.content = '';
        this.messageForm.commentTime = '';
        this.dialogVisible = true;
      },
  
      // 提交留言
      async submitMessage() {
        if (!this.messageForm.commentTime) {
          this.$message.warning('请选择留言时间');
          return;
        }
        if (!this.messageForm.content) {
          this.$message.warning('请输入留言内容');
          return;
        }
        await addComment({
            fileId:this.id,
            commentContent:this.messageForm.content,
            commentTime:this.messageForm.commentTime
        })
        // 模拟提交留言到后端
        console.log('留言内容:', this.messageForm.content);
        this.$message.success('留言成功');
  
        // 清空表单并关闭弹出框
        // this.messageForm.content = '';
        // this.messageForm.commentTime = '';
        this.$emit('reset','')
        this.dialogVisible = false;
      },
    },
  };
  </script>
  
  <style scoped>
  /* 自定义样式 */
  </style>